<template>
  <div style="margin-left:8px;">
    <biz-remote-select
      v-model="value"
      :multiple-limit="10"
      multiple
      cleared
      :remote-method="fetchProductType"
      :placeholder="$t('common.base.productMenu')"
      :computed-width-keys="['label']"
    >
      <div
        class="customer-template-option"
        slot="option"
        slot-scope="{ option }"
      >
        <span>{{ option.name }}</span>
      </div>
    </biz-remote-select>
  </div>
</template>

<script>
/* api */
import * as serviceProviderApi from '@src/api/serviceProviderApi';
export default {
  name: 'TaskCascader',
  props: {
    defaultValue: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  watch: {
    defaultValue: {
      immediate: true,
      deep:true,
      handler(newValue) {
        this.value = newValue;
      },
    },
    value: {
      deep: true,
      handler(newValue) {
        this.$emit('change', newValue);
      },
    },
  },
  data() {
    return {
      value: [],
      props: {
        value: 'id',
        label: 'name',
        children: 'tasks',
      },
      options: [],
    };
  },

  mounted() {},

  methods: {
    /* 查询产品类型*/
    async fetchProductType(params = {}) {
      try {
        let { keyword, pageNum, pageSize } = params;
        const dataToSend = {
          keyword,
          pageNum,
          pageSize,
        };
        // 服务商注册没有登陆信息接口需求传tenantId
        let res =
          this.type === 'register'
            ? await serviceProviderApi.getRegisterProductTypeList({
                tenantId: this.tenantId,
                ...dataToSend,
              })
            : await serviceProviderApi.searchProductTypeList(dataToSend);
        if (!res?.result?.list) return;
        let total = 1;
        if (pageNum === 1 && res?.result?.list.length === 0) {
          total = 0; // 目前产品类型查询接口不返回total,默认若查询不为空赋值total为1
        }
        res.result.list = this.handleTagData(res.result.list);
        res.result.total = total;
        return res.result;
      } catch (error) {
        console.error('search dept error', error);
      }
    },
    /* biz-remote-select数据格式处理 */
    handleTagData(list) {
      let tagData = list.map(item => {
        return {
          label: (item && item.name) || '',
          value: (item && item.id.toString()) || '',
          id: (item && item.id.toString()) || '',
          name: (item && item.name) || '',
        };
      });
      return tagData;
    },
  },
};
</script>

<style lang="scss" scoped>
.customer-template-option {
  padding: 0;
}
</style>
